<template>
    <div>
<p class="tips">新用户下单立减5元</p>
<div style="padding:10px">
<p class="clearcart dpflex mb10"><span>购物车</span><span class="cccc"><van-icon name="delete-o" />清空购物车</span> </p>
<div class="dpflex jsbetween alcenter p5" v-for="item in goodlist" :key="item.id"  >
<span>{{item.name}}</span> <span>￥{{item.price*item.num}}</span> 
<div class="dpflex alcenter">
  <span class="cartButton cccc mr6" style="border:1px solid #ccc;" @click="clickred(item.id)">-</span>
  {{item.num}}
  <span @click="clickadd(item.id)" class="cartButton ml6" style="background:#FFC300;color:#333;border:1px solid #FFC300">+</span>
</div>
</div>
</div>
    </div>
</template>

<script>
    export default {
      methods:{
   //点击减少数量
  clickred(id){
    this.$store.commit('changenum',{id,i:-1})
  },
      //点击增加数量
  clickadd(id){
 this.$store.commit('changenum',{id,i:+1})
  
}
      },
       computed:{
         goodlist(){
           let newarr=[]  //装购物车的数据
           //找出所有商品数量>0的数组
           for(let obj of this.$store.state.datalist){
             for(let child of obj.foods){
               if(child.num>0)newarr.push(child)
             }
           }
           return newarr
         }
       } 
    }
</script>

<style lang="less" scoped>
.tips{
    background-color: #FEE7C8;
    color: red;
    height: 30px;
    display: flex;
   align-items: center;
   justify-content: center;
  };
  .clearcart{
    justify-content: space-between;
    padding: 0 15px;
    
  }
  .cartButton{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    font-size: 30px;
    justify-content: center;
    align-items: center;
    
  }

</style>